<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部图片 -->
        <div class="h-64 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
            <div class="text-center text-white">
                <div class="text-3xl font-bold mb-2">漫拍</div>
                <div class="text-sm opacity-90">漫展摄影接单平台</div>
            </div>
        </div>

        <!-- 登录表单 -->
        <div class="bg-white rounded-t-3xl -mt-10 flex-1 p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">欢迎登录</h2>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                    <input type="tel" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="请输入手机号码">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                    <div class="flex">
                        <input type="text" class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="请输入验证码">
                        <button class="ml-3 px-4 py-3 bg-purple-100 text-purple-600 rounded-lg whitespace-nowrap">获取验证码</button>
                    </div>
                </div>
                
                <button class="w-full bg-purple-600 text-white py-3 rounded-lg font-medium mt-6">登录</button>
                
                <div class="text-center text-sm text-gray-600 mt-4">
                    还没有账号？<a href="#" class="text-purple-600">立即注册</a>
                </div>
            </div>
            
            <div class="mt-8">
                <div class="flex items-center justify-center">
                    <div class="flex-1 h-px bg-gray-200"></div>
                    <div class="px-4 text-sm text-gray-500">其他登录方式</div>
                    <div class="flex-1 h-px bg-gray-200"></div>
                </div>
                
                <div class="flex justify-center space-x-8 mt-6">
                    <button class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                        </svg>
                    </button>
                    <button class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>